<template>
  <div style="padding: 20px;">
    <si-table
      :table-columns="tableColumns"
      :table-data="tableData"
      :table-attrs="tableAttrs"
      :table-on="tableOn"
    >
      <template v-slot:status="props">
        <el-button type="danger" size="small">{{
          props.scope.row.status === 0 ? '启用' : '禁用'
        }}</el-button>
      </template>
      <template v-slot:operate="props">
        <el-button
          type="text"
          size="small"
          @click="handleEdit(props.scope.row)"
        >编辑</el-button>
        <el-button
          type="text"
          size="small"
          @click="handleDel(props.scope.row)"
        >删除</el-button>
      </template>
    </si-table>
  </div>
</template>

<script>
export default {
  name: 'DemoTable',
  components: {},
  data() {
    return {
      tableColumns: [
        {
          width: '55',
          type: 'selection'
        },
        {
          prop: 'date',
          label: '日期',
          sortable: true
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'status',
          label: '状态',
          slotName: 'status'
        },
        {
          prop: 'address',
          label: '地址',
          width: '400px'
        },
        {
          prop: 'gender',
          label: '性别',
          render: row => {
            return row.gender === 0 ? '女' : '男'
          }
        },
        {
          width: 100,
          prop: 'operate',
          label: '操作',
          slotName: 'operate'
        }
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          gender: 0,
          status: 0
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          gender: 1,
          status: 1
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          gender: 0,
          status: 1
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          gender: 0,
          status: 0
        }
      ],
      // table所有属性
      tableAttrs: {},
      // table所有事件
      tableOn: {
        select: (selection, row) => {
          console.log('selection=>', selection)
          console.log('row=>', row)
        },
        'selection-change': selection => {
          console.log('selection=>selection-change=>', selection)
        }
      }
    }
  },
  mounted() {},
  methods: {
    handleEdit(row) {
      console.log(row)
      alert('编辑')
    },
    handleDel(row) {
      console.log(row)
      this.$siConfirm('确定删除？')
        .then(() => {
          // 确定
          setTimeout(() => {
            this.$siLoading().close()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          }, 3000)
        })
        .catch(() => {
          // 取消
        })
    }
  }
}
</script>
